import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';
import MobX from 'mobx';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';
import CountryCodeSelect from 'components/widgets/CountryCodeSelect';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'AgentsDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {
        let title = this.store.isUpdate ? '修改代理商' : '添加代理商';
        title = this.store.isSecond ? ( this.store.isUpdate ? '修改二级代理商' : '添加二级代理商') : title;
        return (
            <div onClick={() => this.store.closeDialog()}
                 className={this.store.visible ? 'agents-mask fade-in' : 'agents-mask fade-out'}>
                <div className="agents-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="agents-header">
                        <span className="header-title">{title}</span>
                        <span className="header-close" onClick={() => this.store.closeDialog()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                    </div>
                    <div
                        className={(this.store.isUpdate && this.store.isSecond) ? 'agents-content update' : 'agents-content'}>
                        {
                            this.store.isSecond &&
                            <div className="agents-input-wrapper">
                                <span className="agents-input-text">一级代理商</span>
                                {
                                    this.store.isUpdate ?
                                        <ReSelectField
                                            type=""
                                            className="work-input"
                                            isOpen={false}
                                            list={MobX.toJS(this.store.firstLevelAgentsList)}
                                            value={this.store.selectFirstAgentId}
                                            placeholder={'选择一级代理商'}
                                            onChange={(v) => this.store.selectFirstLevelChange(v.value)}/>
                                        :
                                        <ReTextField
                                            isLabel={false}
                                            type="number"
                                            className="work-input"
                                            notfullWidth={false}
                                            onChange={(e, v) => this.store.agentPhoneChange(v)}
                                            errorText={''}
                                            readOnly={true}
                                            value={this.store.selectFirstAgentName}
                                            placeholder={'代理商手机号码'}/>
                                }

                            </div>
                        }
                        {
                            !this.store.isUpdate &&
                            <div className="agents-input-wrapper">
                                <span className="agents-input-text">手机号码</span>
                                <ReTextField
                                    isLabel={false}
                                    type="number"
                                    className="work-input reverse"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.agentPhoneChange(v)}
                                    errorText={''}
                                    supportIntOnly={true}
                                    maxLength={this.store.agentSelectCountry.code === $$.SEM.CN_COUNTRY_CODE ? '11' : '15'}
                                    value={this.store.agentPhone}
                                    placeholder={'代理商手机号码'}>
                                    <CountryCodeSelect
                                        codeList={this.store.stores.Frame.countryCodeList}
                                        currentSelect={this.store.agentSelectCountry}
                                        onChange={(selectItem) => this.store.selectCodeItem(selectItem)}/>
                                </ReTextField>
                            </div>
                        }
                        {
                            !this.store.isUpdate &&
                            <div className="agents-input-wrapper">
                                <span className="agents-input-text">姓名</span>
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.agentNameChange(v)}
                                    errorText={''}
                                    maxLength="20"
                                    value={this.store.agentName}
                                    placeholder={'代理商姓名'}/>
                            </div>
                        }
                        <div className="agents-input-wrapper">
                            <span className="agents-input-text">赠送时长</span>
                            <ReTextField
                                isLabel={false}
                                type="number"
                                className="work-input"
                                notfullWidth={false}
                                onChange={(e, v) => this.store.agentGivingTimeChange(v)}
                                errorText={''}
                                maxLength="3"
                                supportIntOnly={true}
                                descText="月"
                                value={this.store.agentGivingTime}
                                placeholder={'赠送时长'}/>
                        </div>
                        <div className="button-wrapper">
                            <ReButton label={'确定'} className="button-confirm"
                                      onClick={() => this.store.confirmDialog()}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-agentsdialog-root">
                {this.renderDialog()}
            </div>
        );
    }
}